<template>
  <van-nav-bar title="古籍查询" left-arrow @click-left="onClickLeft" />
  <van-cell-group>
    <van-search v-model="query" placeholder="请输入书籍名称" @search="onSearch" />
    <div v-for="(book, index) in filteredBooks" :key="index" class="book-container" @click="viewDetails(book)">
      <div class="book-title">{{ book.title }}</div>
      <div class="book-author">作者: {{ book.author }}</div>
      <div class="book-description">{{ book.description }}</div>
    </div>
    <van-empty v-if="filteredBooks.length === 0" description="未找到相关书籍" />
  </van-cell-group>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { books } from '@/config/constant'
const onClickLeft = () => history.back()

const query = ref('')
const router = useRouter()

const filteredBooks = computed(() => {
  if (!query.value) return books
  return books.filter(book => book.title.includes(query.value))
})

const onSearch = value => {
  query.value = value
}

const viewDetails = book => {
  router.push({ name: 'BookDetail', params: { id: book.id } })
}
</script>

<style scoped>
.van-cell-group {
  padding: 16px;
  background-color: #f9f9f9;
}

.book-container {
  margin: 16px 0;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.book-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}

.book-author {
  font-size: 14px;
  color: #888;
  margin-bottom: 8px;
}

.book-description {
  font-size: 14px;
  color: #666;
}

.van-empty {
  margin-top: 16px;
}
</style>
